import Link from "next/link";
import Image from "next/image";
import React from "react";
import { SignedIn, UserButton } from "@clerk/nextjs";
import Theme from "./Theme";
import MobileNav from "./MobileNav";
import GlobalSearch from "./GlobalSearch";

export default function Navbar() {
	return (
		<nav className="flex-between fiexd background-light-900_dark200 z-50 w-full gap-5 p-6  dark:shadow-none sm:px-12">
			<Link href="/" className="flex items-center gap-1">
				<Image
					src="/assets/images/site-logo.svg"
					width={31}
					height={31}
					alt="Dev Overflow"
				></Image>
				<p className="h2-bold font-spaceGrotesk text-dark-100 dark:text-light-900 max-sm:hidden">
					Dev <span className="text-primary-500">Overflow</span>
				</p>
			</Link>
			<GlobalSearch />
			<div className="flex-between gap-5">
				<Theme></Theme>
				{/* 登陆后才能看的组件 */}
				<SignedIn>
					<UserButton
						afterSignOutUrl="/"
						appearance={{
							elements: {
								avatarBox: "h-10 w-10",
							},
							variables: {
								colorPrimary: "#ff7000",
							},
						}}
					/>
				</SignedIn>

				{/* 手机端Menu */}
				<MobileNav />
			</div>
		</nav>
	);
}
